<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 400
        });
	var deg = 0;
	function writeMessage(messageLayer, message) {
		var context = messageLayer.getContext();
		messageLayer.clear();
		context.font = "18pt Calibri";
		context.fillStyle = "black";
		context.fillText(message, 100, 25);
        }

	function rotate45(model) {
		deg = deg + 45;
		model.setRotationDeg(deg);
	}

        var layer = new Kinetic.Layer();
	var messageLayer = new Kinetic.Layer();

	var imageObj = new Image();
	imageObj.src = "funny-picture/ea.jpg";
	
	var yoda = new Kinetic.Image({
	    x: 140,
	    y: stage.getHeight() / 2 - 59,
	    image: imageObj,
	    width: 106,
	    height: 118,
	    listening: true,
	    draggable: true
	});

        var rect = new Kinetic.Rect({
          x: 239,
          y: 75,
          width: 100,
          height: 50,
          fill: 'green',
          stroke: 'black',
          strokeWidth: 4,
	  listening: true,
	  draggable: true
        });

	var rect2 = new Kinetic.Rect({
          x: 49,
          y: 25,
          width: 50,
          height: 50,
          fill: 'red',
          stroke: 'blue',
          strokeWidth: 4,
	  listening: true,
	  draggable: true
        });

	var complexText = new Kinetic.Text({
          x: 100,
          y: 60,
          stroke: '#555',
          strokeWidth: 5,
          fill: '#ddd',
          text: 'COMPLEX TEXT\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.',
          fontSize: 14,
          fontFamily: 'Calibri',
          textFill: '#555',
          width: 380,
          padding: 20,
          align: 'center',
          fontStyle: 'italic',
          shadow: {
            color: 'black',
            blur: 1,
            offset: [10, 10],
            opacity: 0.2
          },
          cornerRadius: 10,
	  draggable:true
        });
	
	rect.on("click", function(){
		rotate45(rect);
	});
	yoda.on("click", function(){
		rotate45(yoda);
	});
        // add the shape to the layer
        layer.add(rect);
	layer.add(rect2);
	layer.add(yoda);
	layer.add(complexText);
        
        // add the layer to the stage
        stage.add(layer);
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
